<template>
  <div class="login" style="width: 100%; height: 100%; position: relative">
    <div class="bg">
      <!-- <div class="version">
        <span>
          
        </span>
      </div>
      <div class="icon1">
        <img src="../../assets/login/icon1.png" alt="" />
        <img
          src="../../assets/login/line1.png"
          alt=""
          style="margin-left: 20px"
        />
      </div>
      <div class="icon2">
        <img src="../../assets/login/icon3.png" alt="" />
        <img
          src="../../assets/login/line1.png"
          alt=""
          style="margin-left: 15px"
        />
      </div>
      <div class="icon3">
        <img src="../../assets/login/icon2.png" alt="" />
        <img
          src="../../assets/login/line2.png"
          alt=""
          style="margin-left: 6px"
        />
      </div>
      <div class="icon4">
        <img src="../../assets/login/icon4.png" alt="" />
        <img
          src="../../assets/login/line1.png"
          alt=""
          style="margin-left: 20px"
        />
      </div>
      <div class="icon5">
        <img src="../../assets/login/icon5.png" alt="" />
        <img
          src="../../assets/login/line1.png"
          alt=""
          style="margin-left: 17px"
        />
      </div>
      <div class="icon6">
        <img src="../../assets/login/icon6.png" alt="" />
        <img
          src="../../assets/login/line1.png"
          alt=""
          style="margin-left: 20px"
        />
      </div>
      <div class="icon7">
        <img src="../../assets/login/icon2.png" alt="" />
        <img
          src="../../assets/login/line1.png"
          alt=""
          style="margin-left: 6px"
        />
      </div>
      <div class="icon8">
        <img src="../../assets/login/icon7.png" alt="" />
        <img
          src="../../assets/login/line1.png"
          alt=""
          style="margin-left: 20px"
        />
      </div>
      <div class="icon9">
        <img src="../../assets/login/icon8.png" alt="" />
        <img
          src="../../assets/login/line1.png"
          alt=""
          style="margin-left: 6px"
        />
      </div> -->
      <!-- <img src="../../assets/login/bg_form_border.png" width="400" /> -->
      <div class="login_box">
        <div class="login_body">
          <!-- 登录表单区域 -->
          <p>用户登录</p>
          <el-form ref="loginForm" :model="loginForm" :rules="loginRules">
            <!-- 用户名 -->
            <el-form-item prop="username">
              <el-input
                type="text"
                v-model="loginForm.username"
                placeholder="请输入用户名"
                prefix-icon="el-icon-user"
              ></el-input>
            </el-form-item>
            <!-- 密码 -->
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="loginForm.password"
                placeholder="请输入密码"
                show-password
                prefix-icon="el-icon-lock"
              ></el-input>
            </el-form-item>
            <!-- 验证码 -->
            <el-form-item prop="code">
              <el-input
                type="text"
                v-model="loginForm.code"
                class="code"
                placeholder="请输入验证码"
                style="width: 60%"
                @keyup.enter.native="submitForm"
              ></el-input>
              <img
                :src="codeImg"
                class="img-code"
                @click="updateCode"
                alt="验证码"
                title="点击换一张"
                height="40"
                style="width: 33%"
              />
            </el-form-item>
            <!-- 登录按钮 -->
            <el-form-item>
              <el-button @click="submitForm">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import * as serviceApi from "../../common/service.config";
import md5 from "js-md5";
import { mapState } from "vuex";
axios.defaults.withcredentials = true;

export default {
  name: "login",
  components: {},
  data() {
    return {
      loginForm: {
        username: "",
        password: "",
        code: "",
      },
      codeImg: serviceApi.URL_VERIFYCODE + "?t=" + new Date().valueOf(),
      // bgImg: null,
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "用户名不能为空" },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            message: "密码不能为空",
          },
        ],
        code: [
          { required: true, trigger: "change", message: "验证码不能为空" },
        ],
      },
    };
  },
  methods: {
    updateCode() {
      this.codeImg = serviceApi.URL_VERIFYCODE + "?t=" + new Date().valueOf();
    },
    submitForm() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          axios({
            url: serviceApi.KB_API,
            method: "post",
            data: `appMsg={"parameter":"{\\"userName\\":\\"${
              this.loginForm.username
            }\\",\\"userPassword\\":\\"${md5(
              this.loginForm.password
            )}\\",\\"validateCode\\":\\"${
              this.loginForm.code
            }\\",\\"loginMode\\":\\"1\\"}","serviceCode":"login","timestamp":"","uuid":""}`,
          }).then((res) => {
            if (res.data.resultcode == "0000") {
              sessionStorage.setItem("token", this.loginForm.username);
              sessionStorage.setItem("monitorId", Number(res.data.parameter.list[0].id));
              if (this.loginForm.username == "wangjiazhuang") {
                sessionStorage.setItem("sensorId", 498);
              } else {
                sessionStorage.setItem("sensorId", 2);
              }
              // this.$router.push("home");
              this.$router.push("site");
            } else {
              this.$message({
                message: res.data.message,
                type: "error",
                duration: 2000,
                showClose: true,
                onClose: () => {
                  this.updateCode();
                },
              });
            }
          });
        }
      });
    },
    // keyDown(e) {
    //   if (e.keyCode == 13) {
    // this.submitForm();
    //   }
    // },
  },
  computed: {
    ...mapState(["projectInfo"]),
  },
  mounted() {
    addEventListener("keydown", this.keyDown);
    this.$store.dispatch("getProjectInfo").then(() => {
      // this.bgImg = serviceApi.URL_IMAGE_VIEW + this.projectInfo.loginBackground;
      window.localStorage.setItem(
        "projectInfo",
        JSON.stringify(this.projectInfo)
      );
    });
  },
  destroyed() {
    removeEventListener("keydown", this.keyDown, false);
  },
};
</script>

<style scoped>
.bg {
  width: 100%;
  height: 100%;
  background: url("../../assets/login/bg.png") no-repeat;
  /* background: url("../../assets/login/bg1.png") no-repeat; */
  background-size: cover;
  position: absolute;
}
.login_box {
  width: 14%;
  height: 40%;
  position: absolute;
  right: 20%;
  top: 50%;
  transform: translate(80%, -60%);
  background: url("../../assets/login/bg_form_border.png") no-repeat center;
  background-size: 100% 100%;
  border: 1px solid #fff;
  border-radius: 4%;
  padding: 1%;
}
.login_body {
  /* background-color: #f5efef; */
  border-radius: 4%;
  width: 100%;
  height: 100%;
  padding: 5%;
  box-sizing: border-box;
}
p {
  width: 100%;
  text-align: center;
  font-size: 1.5rem;
  letter-spacing: 5px;
  color: #fff;
}
.el-input {
  margin-top: 10%;
}
.el-input >>> .el-input__inner {
  /* background-color: #0d4d81; */
  background-color: #fff;
  /* border: 1px solid #0e4d85; */
  border: 1px solid #d5d1d1;
  /* color: white; */
}
.el-form-item {
  margin-bottom: 0;
}
.el-form-item img {
  position: absolute;
  bottom: 1%;
}
.el-button {
  width: 100%;
  margin: 1.5rem auto;
  background: #20a3f5;
  border: none;
  /* color: white; */
  letter-spacing: 10px;
  height: 20%;
  color: #fff;
}
.code {
  margin-right: 6%;
}
@keyframes pulse {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.25, 1.25);
  }
  100% {
    transform: scale(1, 1);
  }
}
@keyframes pulse2 {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.75, 0.75);
  }
  100% {
    transform: scale(1, 1);
  }
}
.icon1 {
  position: absolute;
  width: 45px;
  top: 30%;
  left: 10%;
  animation: pulse2 10s infinite;
}
.icon2 {
  position: absolute;
  width: 45px;
  top: 30%;
  left: 16%;
  animation: pulse 10s infinite;
}
.icon3 {
  position: absolute;
  width: 20px;
  top: 40%;
  left: 13.5%;
  animation: pulse 10s infinite;
}
.icon4 {
  position: absolute;
  width: 45px;
  top: 25%;
  left: 20%;
  animation: pulse2 10s infinite;
}
.icon5 {
  position: absolute;
  width: 45px;
  top: 35%;
  left: 26%;
  animation: pulse 10s infinite;
}
.icon6 {
  position: absolute;
  width: 45px;
  top: 45%;
  left: 33%;
  animation: pulse2 10s infinite;
}
.icon7 {
  position: absolute;
  width: 20px;
  top: 45%;
  left: 30%;
  animation: pulse2 10s infinite;
}
.icon8 {
  position: absolute;
  width: 40px;
  top: 35%;
  left: 37%;
  animation: pulse2 10s infinite;
}
.icon9 {
  position: absolute;
  width: 20px;
  top: 40%;
  left: 43%;
  animation: pulse 10s infinite;
}
</style>